这里主要参考的是CHRIS COYIER写的一篇的文章(点击查看),主要讲了关于css水平、垂直居中的一些方法,每个方法后面都有一个demo,可以在线查看效果。
1 水平
水平居中有行内元素和块元素,行内元素有文字、图片、链接等;块元素主要是div、p等block元素。
1.1 行内元素
对于行内元素可以使用如下实现水平居中(在线查看demo):
.blocklist1_1 {
text-align: center;
}
这种方法对于inline,inline-block,inline-table等都有效。
1.2 块元素
对于一个块元素,可以设置其margin-left和margin-right自动,就像这样(在线查看demo):
.blocklist1_2 .div1 {
margin: 0px auto;
}
无论块元素的宽度是否已知,都可以实现水平居中。
1.3 多个块元素
如果有多个块元素需要水平居中时,有两种办法可以实现。一种是借助inline-block,另一种是借助flex。对于第一种方法可以使用如下方式(在线查看demo),设置块元素display:inline-block,其父元素水平居中:
..blocklist1_3 .div1 {
text-align: center;
}
.blocklist1_3 .div1 div {
display: inline-block;
}
用flex的话需要给块的父元素添加如下样式(在线查看demo):
.blocklist1_3 .div2 {
display: flex;
justify-content: center;
}
2 垂直
垂直居中也分有行内元素和块元素,不过相比水平居中,垂直居中这里需要讨论的情况有点多,下面我们一一分析。
2.1 行内元素
2.1.1 单行
对于单行的行内元素,我们只需要设置其padding-top和padding-bottom值相等即可(在线查看demo):
.blocklist2_1_1 .div1 {
padding-top: 20px;
padding-bottom: 20px;
}
如果我们不能设置padding的话,而行内元素的高度(height=50px)已知时,可以设置line-height=height,实现元素的垂直居中(在线查看demo):
.blocklist2_1_1 .div2 {
line-height: 50px;
height: 50px;
}
2.1.2 多行
对于多行元素我们有四种方式可以实现垂直居中:
a.可以像上面那样通过设置padding-top和padding-bottom的值相等来实现垂直居中(demo-1):
.blocklist2_1_2 .div1 {
padding: 20px 0px;
}
b.可以借助vertical-align属性来实现垂直居中(demo-2):
.blocklist2_1_2 .div2 {
display: table;
}
.blocklist2_1_2 .div2>div {
display: table-cell;
vertical-align: middle;
}
c.可以借助flex技术来实现垂直居中,只需添加如下样式(demo-3):
.blocklist2_1_2 .div3 {
display: flex;
justify-content: center;
flex-direction: column;
height: 400px;
}
d.将一个全高度的伪元素放置在容器内,然后设置文本垂直对齐(demo-4):
.blocklist2_1_2 .div4 {
position:relative;
}
.blocklist2_1_2 .div4::before {
content: ' ';
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.blocklist2_1_2 .div4>div {
display: inline-block;
vertical-align: middle;
}
2.2 块元素
2.2.1 块元素高度已知
在网页布局中有的时候我们知道元素的高度,有的时候我们不知道。对于已知高度的块元素可以这样设置来实现垂直居中(demo):
.blocklist2_2_1 .div {
position: relative;
}
.blocklist2_2_1 .div div {
position: absoulte;
top: 50%;
height: 100px;
margin-top: -70px; //这里70px是height*1/2 + padding
padding: 20px;
}
2.2.2 块元素高度未知
有时候我们是不知道块元素的高度的,这时候可以使用transform来实现(demo):
.blocklist2_2_2 .div {
position: relative;
}
.blocklist2_2_2 .div div {
transform: translateY(-50%);
top: 50%;
position: absoulte;
}
2.2.3 利用flex实现
除了以上两种办法,还可以使用flex实现(demo):
.blocklist2_2_3 .div {
display: flex;
flex-direction: column;
justify-content: center;
}
3 水平垂直
有的时候我们不仅希望水平居中还希望垂直居中,可以结合以上提到的例子进行组合实现,主要分为以下三个方面:
3.1 元素高度、宽度已知
当元素高度和宽度已知时,可以将元素绝对定位,偏移中心50%,然后使用负的margin值实现,如下(demo):
.blocklist3_1 .div {
position: relative;
}
.blocklist3_1 .div div {
position: absoulte;
top: 50%;
left: 50%;
margin: -120px 0px 0px -220px; //height一半,width一半,另外加上padding值
height: 200px;
width: 400px;
padding: 20px;
}
3.2 元素高度、宽度未知
如果元素的高度和宽度未知呢,我们可以使用变换属性,在两个方向赋予50%的负值,如下(demo):
.blocklist3_2 .div {
position: relative;
}
.blocklist3_2 .div div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.3 利用flexbox实现
用flex实现时需要使用两个中心属性(demo):
.blocklist3_3 .div {
display: flex;
justify-content: center;
align-items: center;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。